<!-- 日期选择器组件 -->
<template>
  <uni-popup ref="popup" type="bottom" :animation="true" background-color="#fff">
    <div class="popup-content">
      <div>
        <div class="headBox">
          <div @click="close"><text class="text1">取消</text></div>
          <div><text class="text1 blue" @click="ok">确定</text></div>
        </div>
        <picker-view indicator-style="height: 34px;" :value="pickerIndex" @change="bindChange" :immediate-change="true">
          <picker-view-column v-for="(dateArr, dateArrIndex) in dateListArr" :key="dateArrIndex">
            <div class="pick-item" :style="{ height: '100rpx' }" v-for="(num, index) in dateArr" :key="index">{{ num }}{{
              unitArr[dateArrIndex] || '' }}
            </div>
          </picker-view-column>
        </picker-view>
      </div>
    </div>
  </uni-popup>
</template>

<script lang="ts">

/** 月份列表 */
const MONTH_LIST = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
/** 日期列表 */
const DAY_LIST = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31']

import dayjs from 'dayjs';

export default {
  name: 'MyDatetime',
  props: {
    titleShow: {
      type: Boolean,
      default: true
    },
    timeStr: {
      // 是否展开
      type: String,
      default: ''
    },
    // 显示位数
    showNum: {
      type: Number,
      default: 5
    },
    /** 开始日期 */
    startDate: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      /** 选择器各值索引 */
      pickerIndex: [0, 0, 0, 0, 0],
      unitArr: ['年', '月', '日', '时', '分', '秒'],
      obj: {
        0: 'year',
        1: 'month',
        2: 'day',
        3: 'hour',
        4: 'minute'
      },
      /** 当前年份列表 */
      yearList: [2007],
      hourArr: [],
      minArr: [],
      visible: true,
      indicatorStyle: `height: 100rpx;`,
      timer: null
    };
  },
  computed: {
    /** 当前选择的时间 */
    currentTime() {
      const year = this.yearList[this.pickerIndex[0]]
      const month = this.monthList[this.pickerIndex[1]]
      const day = this.dayList[this.pickerIndex[2]]
      console.log('year', year, month, day)
      return `${year}-${month}-${day}`
    },
    /** 当前月份列表 */
    monthList() {
      const startYear = dayjs(this.startDate).year()
      const currentYear = this.yearList[this.pickerIndex[0]]
      // 如果当前选择的年份不是开始的年份，则直接返回12个月
      console.log('startYear', startYear, currentYear)
      if (startYear != currentYear) {
        return MONTH_LIST
      }
      else {
        const startMonth = dayjs(this.startDate).month()
        return MONTH_LIST.slice(startMonth)
      }
    },
    /** 当前日期列表 */
    dayList() {
      const startYear = dayjs(this.startDate).year()
      const currentYear = this.yearList[this.pickerIndex[0]]

      const startMonth = dayjs(this.startDate).month() + 1
      const currentMonth = this.monthList[this.pickerIndex[1]]
      const daysInMonth = dayjs(`${currentYear}-${currentMonth}`).daysInMonth()

      console.log('startDate', this.startDate)
      console.log('dayList', startYear, currentYear, startMonth, currentMonth)
      // 如果当前选择的年份是开始的年份，而且选择的月份也是开始的月份，则需要对日期列表进行处理
      if (startYear === startYear && startMonth === parseInt(currentMonth)) {
        console.log('test')
        const startDay = dayjs(this.startDate).date()
        console.log('startDayIndex', startDay)
        return DAY_LIST.slice(startDay - 1, daysInMonth)
      }
      return DAY_LIST.slice(0, daysInMonth)
    },
    /** 所有时间列表的数组 */
    dateListArr() {
      return [this.yearList, this.monthList, this.dayList, this.hourArr, this.minArr].slice(0, this.showNum)
    },
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      const startYear = dayjs(this.startDate).year()

      // 年初始化，生成从开始时间到往后100年的年份列表
      this.yearList = [...new Array(100).keys()].map((item) => {
        return startYear + item
      })
    },
    // 确认
    ok() {
      this.$emit('change', this.currentTime);
      this.close();
    },
    // 弹窗
    open() {
      const popup: any = this.$refs.popup
      popup.open();
    },
    /**
     * 关闭窗口
     */
    close() {
      const popup: any = this.$refs.popup
      popup.close();
    },
    /** 时间修改事件 */
    bindChange: function (e: any) {
      // XXX 这里需要优化以实现从开始日期和其他日期来回切换时保持原值
      const [yearIndex, monthIndex, dayIndex] = e.detail.value
      this.pickerIndex = e.detail.value
      // 如果只是修改日，则直接替换原值后返回
      if (yearIndex === this.pickerIndex[0] && monthIndex === this.pickerIndex[1]) {
        this.pickerIndex = e.detail.value
        return
      }
    },
  },
}
</script>

<style scoped lang="scss">
.popup-content {
  background-color: #FFFFFF;
}

.text1 {
  padding: 0 28rpx;
  font-size: 34rpx;
  line-height: 90rpx;
  color: #888;
  float: left;
}

.blue {
  float: right;
  color: #007aff;
}

.uni-page-head-title {
  display: inline-block;
  padding: 0 20rpx;
  font-size: 26rpx;
  height: 88rpx;
  line-height: 88rpx;
  color: #BEBEBE;
  box-sizing: border-box;
}

.headBox {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #e5e5e5;
}

picker-view {
  width: 100%;
  height: 600rpx;

  .pick-item {
    height: 34px;
    line-height: 34px;
    text-align: center;
    font-size: 30rpx;
  }
}
</style>
